<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../bootstrap-table/bootstrap-table.css">
    <script src="../bootstrap-table/bootstrap-table.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../bootstrap/js/html5shiv.min.js"></script>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <script src="../toastr/toastr.min.js"></script>

</head>
<body>
<style>
    ::-webkit-scrollbar {display:none}
</style>
<div style=" width:0px;   height: 0px;  overflow-y: scroll;">
</div>
<div class="container-fluid">
    <div class="row" id="tableToolBar">
        <button class="btn btn-sm btn-warning" id="addBtn" style="margin-left: 15px">
            <i class="fa fa-plus" aria-hidden="true"></i>添加用户
        </button>
    </div>

    <div class="row">
        <div class="col-md-6" id="myTable"></div>
    </div>

    <!--    删除模态框-->
    <div class="modal fade" id="myDeleteModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        删除用户</h4>
                </div>
                <div class="modal-body" id="deleteDialogMsg">
                    确定要删除该用户嘛
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="deleteBtn">
                        删除
                    </button>
                </div>
            </div><!-- /.modal-content --></div>
    </div>

    <!--    添加或编辑模态框-->
    <div class="modal fade" id="myDialog" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close"
                            data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myDialogHeaderLable">
                    </h4>
                </div>
                <div class="modal-body" id="myDialogBody">
                    <div class="panel-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-3 control-label">id</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="u_id"
                                    >
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">用户名</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="u_name"
                                           placeholder="请输入用户名">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label">用户密码</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" id="u_pwd"
                                           placeholder="请输入密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">用户类型</label>
                                <div class="col-md-9">
                                    <select class="form-control" id="u_type">

                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" id="updateBtn">

                    </button>
                </div>
            </div><!-- /.modal-content --></div>
    </div>

</div>

<script>
    var u_id;
    $(document).ready(function() {
        $("#addBtn").click(function () {
            $("#u_id").val("");
            showModal();
        });
        $("#updateBtn").click(function () {
            var u_id=$("#u_id").val();
            if(u_id==""){
                $.ajax({
                    url: "../user/insert",
                    type: "post",
                    dataType: "json",
                    data: {
                        u_name: $("#u_name").val(),
                        u_pwd: $("#u_pwd").val(),
                        u_roleid: $("#u_type").val(),
                    },
                    success: function (result) {
                        if (result.errorCode == 0) {
                            $("#myDialog").modal("hide");
                            inittable();
                            toastr.success(result.status);
                        }
                    }
                });
            }else{
                $.ajax({
                    url: "../user/update",
                    type: "post",
                    dataType: "json",
                    data: {
                        u_id:u_id,
                        u_name: $("#u_name").val(),
                        u_pwd: $("#u_pwd").val(),
                        u_roleid: $("#u_type").val(),
                    },
                    success: function (result) {
                        if (result.errorCode == 0) {
                            $("#myDialog").modal("hide");
                            inittable();
                            toastr.success(result.status);
                        }
                    }
                });
            }

        });
        $("#deleteBtn").click(function () {
            $.ajax({
                url:"../user/deleteOne",
                type:"get",
                dataType:"json",
                data:{
                    u_id:u_id
                },
                success:function (result) {
                    // alert(JSON.stringify(result));
                    var errorCose=result.errorCode;
                    if(errorCose==0){
                        //模态框隐藏
                        $("#myDeleteModal").modal("hide");
                        inittable();
                        toastr.success(result.status);
                    }
                }
            });
        });
        inittable();
        function inittable() {
            //让bookstraptable销毁
            $("#myTable").bootstrapTable("destroy");
            $("#myTable").bootstrapTable({
                url: "../user/selectAll",
                method: 'GET', //请求方式（*）
                toolbar: '#tableToolBar',              //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "asc", //排序方式
                sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                pageSize: 10, //每页的记录行数（*）
                pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                search: true, //是否显示表格搜索,模糊查询
                strictSearch: false,//精确查询
                silent : true,// 刷新事件必须设置
                showColumns: true, //是否显示所有的列（选择显示的列）
                showRefresh: true, //是否显示刷新按钮
                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: true, //是否启用点击选中行
                //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "u_id", //每一行的唯一标识，一般为主键列
                showToggle: true, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                clickToSelect: true,    //是否启用点击选中行
                columns: [

                    {
                        checkbox: true,

                    },
                    {
                        field: 'u_name',
                        title: '用户名',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        field: 'r_name',
                        title: '角色',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',

                    },
                    {
                        field: 'u_pwd',
                        title: '用户密码',
                        sortable: true,
                        width: 350,
                        align: 'center',
                        valign: 'middle',
                    },
                    {
                        title: "操作",
                        width: 400,
                        align: 'center',
                        valign: 'middle',
                        events: operateEvents,
                        //如果要对按钮进行操作，并且需要获取点击的按钮对应的行内的数据，需要加：
                        formatter: function (value, row, index) {
                            return "<button class='btn btn-info btn-sm updateCourse'><i class='fa fa-pencil-square-o' aria-hidden='true'></i>编辑</button><button class='btn btn-warning btn-sm deleteCourse'><i class='fa fa-trash' aria-hidden='true'></i>删除</button>"
                        }
                    }

                ],
                //    复选框居中显示
                onLoadSuccess: function () {
                    //复选框的居中样式，自定义一个复选框的CSS样式，代替了BootStrap的默认样式
                    $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                },
            });
        };
    });
    window.operateEvents={
        'click .updateCourse': function (e, value, row, index) {
            $("#u_id").val(row.u_id);
            $.ajax({
                url: "../user/selectById",
                type: "post",
                dataType: "json",
                //序列化,能够传递数组给服务器
                traditional: true,
                data: {
                    id: row.u_id
                },
                success: function (result) {
                    // alert(JSON.stringify(result));
                    var errorCose = result.errorCode;
                    if (errorCose == 0) {
                        showModal();
                        $("#u_name").val(result.object.u_name);
                        $("#u_pwd").val(result.object.u_pwd);
                        $("#u_type").val(result.object.u_roleid);
                    }
                }
            });
        },

        'click .deleteCourse': function (e, value, row, index) {
            u_id=row.u_id;
            $("#deleteDialogMsg").html("确定要删除用户"+row.u_name)
            $("#myDeleteModal").modal("show");
        },

    }
    function showModal() {
        var html = "";
        $.ajax({
            url: "../usertype/selectAll",
            type: "get",
            dataType: "json",
            async: false,//设置为同步方法
            success: function (result) {
                if (result.errorCode == 0) {
                    var list = result.objectList;
                    var mySelect = $("#u_type");

                    mySelect.html("");
                    $(list).each(function (index) {
                        html = $("<option></option>").text(list[index].r_name).val(list[index].r_id);
                        mySelect.append(html);

                    })
                }
            }

        });
        var u_id = $("#u_id").val();
        if (u_id=="") {
            $("#myDialogHeaderLable").text("添加用户");
            $("#updateBtn").text("添加");
            $("#myDialog").modal("show");
        } else {
            $("#myDialogHeaderLable").text("编辑用户");
            $("#updateBtn").text("更新");
            $("#myDialog").modal("show");
        }

    };
</script>
</body>
</html>